﻿<template>
  <div class="bigdataContainer">
    <div class="bigDataWrap">
      <div class="bigDataheader">
        <h3 class="header-title"><!-- <img src="./img/logob.png" class="logoSty" alt="logo"> -->
          <span class="titleSty">互联网租赁自行车综合治理平台</span>
        </h3>
      </div>
      <i class="iconfont icon-guanbi" @click="toHome"></i>
      <!--<canvasBg></canvasBg>-->
      <div class="bigDataInner">
        <el-row style="height: 100%;padding: 0 15px;">
          <el-col :span="5" class="echartslrWrap">
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start" size="1000">
                <div slot="content">统计当前各单车企业在平台登记投放的车辆编号数量</div>
                <div class="alltitle">备案车辆数</div>
              </el-tooltip>
              <div class="allnav" id="echart1"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start">
                <div slot="content">当天企业每小时产生订单数/企业备案车辆数</div>
                <div class="alltitle">车辆周转率</div>
              </el-tooltip>
              <div class="allnav" id="echart2"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start">
                <div slot="content">统计各企业最新考核得分</div>
                <div class="alltitle">考核得分</div>
              </el-tooltip>
              <div class="allnav" id="echart3"></div>
            </div>
          </el-col>
          <el-col :span="14" style="height: 100%;position: relative;">
            <div style="height: 74%;position: relative;text-align: center;">
              <div class="bikeButtonWrap">
                <el-radio-group v-model="mapType" @change="changeMapType()">
                  <el-radio-button label="one">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">{{ pageData.count1 }}</div>
                      <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                                  placement="bottom-start">
                        <div slot="content">按企业车辆最新上传位置进行统计各行政区、行政街道车辆数量</div>
                        <div class="textBikeSecond">车辆统计</div>
                      </el-tooltip>

                    </div>
                  </el-radio-button>
                  <el-radio-button label="two">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">{{ pageData.count2 }}</div>
                      <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                                  placement="bottom-start">
                        <div slot="content">按企业车辆最新上传位置在地图上展示单车位置</div>
                        <div class="textBikeSecond">车辆分布</div>
                      </el-tooltip>

                    </div>
                  </el-radio-button>
                  <el-radio-button label="three">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">{{ pageData.count3 }}</div>
                      <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                                  placement="bottom-start">
                        <div slot="content">统计各行政区、行政街道当天平台检测与巡查举报案件数量</div>
                        <div class="textBikeSecond">案件分布</div>
                      </el-tooltip>

                    </div>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="mapMainWrap">
                <div v-show="mapType=='one'" class="imgWrap">
                  <div class="imgMapInner">
                    <div class="imgHomeWrap">
                      <img class="imgMapSty" src="./img/shenzhen.png"/>
                      <!--@click="gotoMap(item.id,item.count)"-->
                      <div v-for="(item,index) in bigDataPositions" :key="index" class="areaListSty"
                           :style="item.position">
                        <div class="textSha">{{ item.districtName }}</div>
                        <div class="textSha">{{ item.count }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mapContainer" ref="mapContainerX">
                  <div v-show="mapType=='two'||mapType=='three'" id='allmap'></div>
                  <i v-show="mapType=='two'||mapType=='three'" @click='screenfullMap'
                     class="iconfont icon-quanping2"></i>
                  <div v-show="showloading" class="loadingWrap">
                    <div class="loadingInner">
                      <img src="./images/loading.gif">
                      <div class="loadingText">单车数据加载中...</div>
                    </div>
                  </div>

                </div>
              </div>

              <div v-show="mapType=='one'" class="buttonbottomWrap">
                <el-radio-group v-model="enterpriseNo" @change="getFirstMapInfo">
                  <el-radio-button v-for="(item,key) in enterPriseBtns" :key="key" :label="item.enterpriseNo">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">{{ item.enterpriseName }}</div>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div v-show="mapType=='two'" class="buttonbottomWrap">
                <el-radio-group v-model="enterpriseNoTwo" @change="changeDistribution">
                  <el-radio-button v-for="(item,key) in enterPriseBtnsTwo" :key="key" :label="item.enterpriseNo">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">{{ item.enterpriseName }}</div>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="mapBg">
                <div class="mapBg1"><img style="height: 100%;" src="./picture/lbx.png"></div>
                <div class="mapBg2"><img style="height: 100%;" src="./picture/jt.png"></div>
                <div class="mapBg3"><img style="height: 100%;" src="./picture/map.png"></div>
              </div>
            </div>
            <el-row class="echartsCwrap" :gutter="10">
              <el-col :span="8" style="height: 100%;">
                <div class="boxall" style="height: 100%;">
                  <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                              placement="bottom-start">
                    <div slot="content">累计各企业当天骑行用户数(用户去重)</div>
                    <div class="alltitle">今日骑行用户数</div>
                  </el-tooltip>
                  <div class="allnav" id="echart4"></div>
                </div>
              </el-col>
              <el-col :span="8" style="height: 100%;">
                <div class="boxall" style="height: 100%;">
                  <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                              placement="bottom-start">
                    <div slot="content">统计当天企业各行政区用户骑行订单数</div>
                    <div class="alltitle">骑行订单数
                      <div style="display: inline-block;width: 55%;float:right;margin-top: -6px;">
                        <DigitRoll
                            ref='digitroll'
                            :rollDigits='digits'
                            :flipStra="true"
                        />
                      </div>
                    </div>
                  </el-tooltip>
                  <div class="allnav" id="echart10"></div>
                </div>
              </el-col>
              <el-col :span="8" style="height: 100%;">
                <div class="boxall" style="height: 100%;">
                  <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                              placement="bottom-start">
                    <div slot="content">根据车辆最新上传位置进行统计街道停放车辆数量排名</div>
                    <div class="alltitle">街道停放排名前五</div>
                  </el-tooltip>
                  <div class="allnav" id="echart5"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5" class="echartslrWrap">
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start">
                <div slot="content">统计企业当天每小时各区用户骑行车辆数量(车辆去重)</div>
                <div class="alltitle">骑行车辆</div>
              </el-tooltip>
              <div class="allnav" id="echart6"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start">
                <div slot="content">统计当天各区已处理案件总数与未处理案件总数</div>
                <div class="alltitle">案件处置情况</div>
              </el-tooltip>
              <div class="allnav" id="echart7"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" popper-class="popperCss" class="item" effect="dark"
                          placement="bottom-start">
                <div slot="content">统计当天各区预警总数</div>
                <div class="alltitle">各区预警统计</div>
              </el-tooltip>
              <div class="allnav" id="echart8"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import DigitRoll from '@huoyu/vue-digitroll';
import canvasBg from "./ehcarts/canvasBg.vue"
import echarts from 'echarts'
// import "./dist/sz"
// import szlnglat from "./dist/szlnglat"
import bigdata from "../../store/data"

export default {
  data() {
    return {
      digits: "0",
      newDigits: "5",
      mapType: "one",
      digitsShow: false,
      account: "",
      password: "",
      code: "",
      myChart: "",
      map: "",
      enterpriseNo: "",
      enterpriseNoTwo: "",
      timer: "",
      loading: "",
      showloading: false,
      splitMapList: {other: '#fddf01', 1: "#f25b4a", 2: "#fddf01", 3: "#01CBE3"},
      fileStrList: [],
      mapData: [],
      bigData: [],
      dataIndex: 0,
      pageData: {
        count1: 0,
        count2: 0,
        count3: 0,
      },
      echarts_1Data: [[], []],
      echarts_2Data: [],
      echarts_3Data: [],
      echarts_4Data: [],
      echarts_5Data: [],
      echarts_6Data: [],
      echarts_7Data: [[], []],
      echarts_8Data: [],
      enterPriseBtns: [],
      enterPriseBtnsTwo: [{enterpriseName: "", enterpriseNo: ""}],
      caseData: [],
      bigDataPositions: [
        {districtName: "宝安区", position: "left: 11%;top: 40%;", count: "12345", id: 4,},
        {districtName: "光明新区", position: "left: 20%;top: 18%;", count: "12345", id: 9,},
        {districtName: "南山区", position: "left: 24%;top: 56%;", count: "12345", id: 3,},
        {districtName: "龙华区", position: "left: 32%;top: 33%;", count: "12345", id: 7,},
        {districtName: "福田区", position: "left: 35%;top: 59%;", count: "12345", id: 2,},
        {districtName: "龙岗区", position: "left: 54%;top: 29%;", count: "12345", id: 5,},
        {districtName: "罗湖区", position: "left: 48%;top: 52%;", count: "12345", id: 1,},
        {districtName: "盐田区", position: "left: 60%;top: 48%;", count: "12345", id: 6,},
        {districtName: "坪山区", position: "left: 69%;top: 35%;", count: "12345", id: 8,},
        {districtName: "大鹏新区", position: "left: 79%;top: 49%;", count: "12345", id: 10,},
      ],
      series: [
        {
          name: '摩拜',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#FE8762',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(184, 87, 68, 0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(184, 87, 68, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#FE8762',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: []
        },
        {
          name: 'ofo',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#FFE775',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 231, 117, 0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(255, 231, 117, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#FFE775',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: []
        },
        {
          name: '哈啰',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: '#00BAFF',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 186, 255, 0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 186, 255, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#00BAFF',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: []
        },
        {
          name: '青桔',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: '#0bb5b4',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(11, 181, 180, 0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(11, 181, 180, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#0bb5b4',
              borderColor: 'rgba(11, 181, 180, .1)',
              borderWidth: 12
            }
          },
          data: []
        },
      ]
    }
  },
  components: {
    canvasBg, DigitRoll
  },
  created() {
    this.getEchartsData()
  },
  mounted() {
    this.changeMapType()
    this.getFirstMapInfo()
    setTimeout(() => {
      this.getDitsData()
    }, 1000)
    this.timer = setInterval(() => {
      this.getDitsData()
    }, 10000)
  },

  methods: {
    changeDistribution() {
      this.map.clearOverlays()
      if (this.enterpriseNoTwo) {
        this.showloading = true
        this.getMapPage(1)
      } else {
        this.getBigData()
      }
    },
    getMapPage(page) {
      this.axios.post(process.env.API_HOST + '/show/activeDistributionMap', {
        "enterpriseNo": this.enterpriseNoTwo,
        "rows": 20000,
        "page": page
      })
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.mapData = result.result.pointList
              if (result.result.enterpriseNo != this.enterpriseNoTwo) {
                return
              }
              if (this.mapData.length > 0) {
                this.mapvSetTwo(page)
              } else {
                this.showloading = false
              }
            }
          })
    },
    mapvSetTwo(index) {
      if (this.mapType != "two" || this.mapData.length == 0) {
        return
      }
      var dataSet = new mapv.DataSet(this.mapData);
      var options = {
        splitList: this.$store.state.splitMapColors,
        size: 0.5,
        draw: 'category'
      }
      new mapv.baiduMapLayer(this.map, dataSet, options);
      //  继续获取
      index++
      this.getMapPage(index)
    },
    getDitsData() {
      this.axios.post(process.env.API_HOST + '/show/selectCurOrderCount', {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              let oldDigits = this.newDigits
              this.newDigits = result.result
//              测试数据
//              this.newDigits = Math.floor(Math.random() * 10000)
              if (this.digits != this.newDigits) {
                this.adddigits(oldDigits)
              }
            }
          })
    },
    adddigits(oldDigits) {
      let oldArr = ("0000000" + oldDigits).slice(-7).split("")
      let newDigal = ("0000000" + this.newDigits).slice(-7)
      let arr = []
      newDigal.split("").forEach((item, index) => {
        if (item != oldArr[index]) {
          arr.push({
            value: item,
            dur: 300 * (item - oldArr[index] > 0 ? item - oldArr[index] : oldArr[index] - item),
          })
        } else {
          arr.push({
            value: item,
            dur: 1,
          })
        }
      })
      this.changeDigit(arr)
    },
    changeDigit(arr) {
      this.$refs.digitroll.setDigit(arr)
      /* this.$refs.digitroll.setDigit([{
       value: 2,
       dur: 1,
       }, {
       value: 4,
       dur: 1,
       }, {
       value: 6,
       dur: 1200,
       }, {
       value: 8,
       dur: 1500,
       }]);*/
    },
    toHome() {
      this.$router.push("/home")
    },
    getFirstMapInfo() {
      //bigDataMap
      this.axios.post(process.env.API_HOST + '/statis/selectOnlineVehicleSum', {
        enterpriseNo: this.enterpriseNo,
        parentId: 0,
        regionType: 0
      })
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.pageData.count1 = result.result.totalSum
              result.result.list.forEach(item => {
                this.bigDataPositions.forEach(item1 => {
                  if (item.regionId == item1.id) {
                    item1.count = item.onlineVehicleTotal
                  }
                })
              })
              if (this.enterpriseNo == "" && this.enterPriseBtns == 0) {
                this.enterPriseBtns = [{enterpriseNo: "", enterpriseName: "全部" + " " + result.result.totalSum}]

                this.sortByKey(result.result.enterpriseList, 'enterpriseNo').forEach(item => {
                  this.enterPriseBtns.push({
                    enterpriseNo: item.enterpriseNo,
                    enterpriseName: item.enterpriseName + " " + item.onlineVehicleTotal
                  })
                })

              }
              /* if (this.echarts_5Data.length == 0) {
                 result.result.rankingList.forEach((item, index) => {
                   this.echarts_5Data.push({
                     name: item.regionName,
                     value: (index + 1) * 2000,
                     value1: item.onlineVehicleTotal
                   })
                 })
                 this.echarts_5()
               }*/

            }
          })
      // 街道排名前五
      this.axios.post(process.env.API_HOST + '/show/selectStreetParkRank', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.echarts_5Data = []
              result.result.forEach((item, index) => {
                this.echarts_5Data.push({
                  name: item.streetName,
                  value: (index + 1) * 2000,
                  value1: item.sumCount
                })
              })
              this.echarts_5()
            }
          })
      // 案件分布
      this.axios.post(process.env.API_HOST + '/show/violationCaseDetail', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.pageData.count3 = result.result.caseTotal
              this.caseData = []
              this.sortByKey(result.result.enterpriseList, 'enterpriseNo').forEach(item => {
                if (item.list.length > 0) {
                  item.list.forEach(item1 => {
                    this.caseData.push(
                        {
                          "geometry": {"type": "Point", "coordinates": [item1.lng, item1.lat]},
                          time: Math.random() * 10
                        },
                    )

                  })
                }
              })

            }
          })
    },
    getEchartsData() {
      //bigDataMap
      this.axios.post(process.env.API_HOST + '/show/vehicleDistribution', {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.fileStrList = result.result.fileStr
              this.pageData.count2 = result.result.totalCount
              this.enterPriseBtnsTwo[0].enterpriseName = "全部 " + result.result.totalCount
              this.sortByKey(result.result.list, 'enterpriseNo').forEach(item => {
                this.enterPriseBtnsTwo.push({
                  enterpriseName: item.enterpriseName + " " + item.enterpriseCount,
                  enterpriseNo: item.enterpriseNo
                })
              })
            }
          })
      //echarts_1
      this.axios.post(process.env.API_HOST + '/show/registerVehicle', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.echarts_1Data = [[], []]
              if (result.result.enterpriseList.length > 0) {
                this.sortByKey(result.result.enterpriseList, "enterpriseNo").forEach(item => {
                  this.echarts_1Data[0].push(item.enterpriseName)
                  this.echarts_1Data[1].push({name: item.enterpriseName, value: item.totalCount})
                })
              }
              this.echarts_1()
            }
          })
      //echarts_2
      this.axios.post(process.env.API_HOST + '/show/selectVehicleRevolveDetail', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              let seriesData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
              if (result.result.colletions.length > 0) {
                this.sortByKey(result.result.colletions, "enterpriseNo").forEach((item, index) => {
                  this.series.forEach(item1 => {
                    if (item.enterpriseName == item1.name) {
                      let arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                      item.datas.forEach(item2 => {
                        arr[item2.taskPoint] = item2.revolveRate
                      })
                      seriesData.push({...item1, data: arr})
                    }
                  })
                })
              }
              this.echarts_2(seriesData)
            }
          })
      //echarts_3 考核得分
      this.axios.post(process.env.API_HOST + `/examine/selectEnterpriseClassTotal`, {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              let indicatorData = [], dataArr = []
              if (result.result.length > 0) {
                result.result.forEach((item, index) => {
                  dataArr[index] = {
                    value: [0, 0, 0, 0, 0],
                    name: item.enterpriseName
                  }
                  item.classTotalList.forEach((item1, index1) => {
                        if (index == 0) {
                          indicatorData.push({name: item1.classifyName, max: item1.standardScore})
                        }
                        dataArr[index].value[index1] = !!item1.finalScore ? parseFloat(item1.finalScore) : 0
                      }
                  )
                })
              }
              this.echarts_3(indicatorData, dataArr)
            }
          })
      //echarts_10 骑行订单数
      this.axios.post(process.env.API_HOST + '/show/cyclingOrder', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.echarts_3Data = [[], []]
              result.result.colletions.forEach(item => {
                this.echarts_3Data[0].push(item.regionName)
                this.echarts_3Data[1].push(parseInt(item.count / 100) / 100)
              })
              this.echarts_10(this.echarts_3Data)
            }
          })
      //echarts_4
      this.axios.post(process.env.API_HOST + '/show/cyclingUserCount', {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.echarts_4Data = []
              if (result.result.length > 0) {
                this.sortByKey(result.result, "enterpriseNo").forEach(item => {
                  this.echarts_4Data.push({label: item.enterpriseName, value: item.userCount})
                })
              }

              this.echarts_4(this.echarts_4Data)
            }
          })
      //echarts_6
      this.axios.post(process.env.API_HOST + '/show/cyclingVehicleDetail', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              let seriesData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

              if (result.result.colletions.length > 0) {
                this.sortByKey(result.result.colletions, 'enterpriseNo').forEach((item, index) => {
                  this.series.forEach(item1 => {
                    if (item.enterpriseName == item1.name) {
                      let arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                      item.datas.forEach(item2 => {
                        arr[item2.taskPoint] = parseInt(item2.vehicleCount / 100) / 100
                      })
                      seriesData.push({...item1, data: arr})
                    }
                  })
                })
              }
              this.echarts_6(seriesData)
            }
          })
      //echarts_7
      this.axios.post(process.env.API_HOST + '/show/violationCase', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.echarts_7Data = [[], [], []]
              result.result.forEach(item => {
                this.echarts_7Data[0].push(item.regionName)
                this.echarts_7Data[1].push({
                  value: item.caseTotal,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                })
                this.echarts_7Data[2].push({
                  value: item.disposeCount,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                })
                this.echarts_1Data.push({name: item.enterpriseName, value: item.totalCount})
              })
              this.echarts_7()
            }
          })
      //echarts_8
      this.axios.post(process.env.API_HOST + '/show/districtAlarm', {})
          .then(response => {
            const result = response.data
            if (result.code == 200 && result.result) {
              this.echarts_8Data = []
              result.result.forEach(item => {
                this.echarts_8Data.push({name: item.regionName, value: item.alarmCount})
              })
              this.echarts_8(this.echarts_8Data)
            }
          })
    },
    //全屏
    screenfullMap() {

      if (this.screenfull.enabled) {
        this.screenfull.toggle(this.$refs.mapContainerX);
      } else {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })

      }
    },
    //暂时废弃
    makesz3D() {
      let geoCoordMap = {
        "深圳": [114.07, 22.62],
        "罗湖区": [114.15365, 22.569561],
        "福田区": [114.053134, 22.543838],
        "南山区": [113.97441, 22.568771],
        "盐田区": [114.292525, 22.606567],
        "坪山区": [114.375248, 22.687244],
        "宝安区": [113.862424, 22.666302],
        "龙华区": [114.039535, 22.68556],
        "光明区": [113.956823, 22.758294],
        "大鹏区": [114.482015, 22.605026],
        "龙岗区": [114.297589, 22.737808],
        "南头街道": [113.928713, 22.553116],
        "南山街道": [113.91204, 22.521337],
        "沙河街道": [113.986348, 22.545639],
        "蛇口街道": [113.942654, 22.498901],
        "招商街道": [113.907297, 22.489818],
        "粤海街道": [113.952284, 22.542168],
        "桃源街道": [113.995403, 22.59076],
        "西丽街道": [113.958149, 22.612814],

      };

      let convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      let myChart = this.echarts.init(document.getElementById('allmap'))
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',//canvas的背景颜色
        title: {
          text: '深圳3D',
          show: false,
          x: 'left',
          top: "10",
          textStyle: {
            color: '#000',
            fontSize: 14
          }
        },
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          show: true,
          // formatter:(params)=>{
          //   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
          //   return data;
          // },
        },

        visualMap: [{
          type: 'continuous',
          seriesIndex: 0,
          show: true,
          text: [''],
          calculable: true,
          max: 500,
          inRange: {
            color: ['green', '#eba438', '#d94d4c']
          },
          textStyle: {
            color: '#bef2ff',
            fontSize: 10
          },
          itemWidth: 10,
          itemHeight: 100,
          left: "2%",
        }, {
          min: 0,
          max: 300,
          seriesIndex: 1,
          left: 'right',
          calculable: true,
          inRange: {
            color: ['blue', 'blue', 'green', 'yellow', 'red']
          },
          textStyle: {
            color: '#fff'
          }
        }],
        geo3D: {
          map: 'shenzhen',
          roam: true,
          itemStyle: {
            color: '#1d5e98',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: '#000'
          },
          label: {
            show: true,
            textStyle: {
              color: '#000047', //地图初始化区域字体颜色
              fontSize: 12,
              opacity: 1,
              backgroundColor: 'rgba(0,23,11,0)'
            },
          },
          viewControl: {
            distance: 85,
          },
          emphasis: { //当鼠标放上去  地区区域是否显示名称
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 12,
                backgroundColor: 'rgba(0,23,11,0)'
              }
            }
          },
          //shading: 'lambert',
          light: { //光照阴影
            main: {
              color: '#fff', //光照颜色
              intensity: 1.2, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: false, //是否显示阴影
              alpha: 55,
              beta: 10

            },
            ambient: {
              intensity: 0.3
            }
          },
        },
        series: [{
          name: '热力值',
          type: "bar3D",
          coordinateSystem: 'geo3D',
          barSize: 0.9, //柱子粗细
          shading: 'lambert',
          opacity: 1,
          bevelSize: 1,
          label: {
            show: false,
            formatter: '{b}'
          },

          data: convertData([
            {
              name: "罗湖区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南山区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "宝安区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "光明区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "龙华区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "龙岗区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "盐田区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "大鹏区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "坪山区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "大鹏区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "福田区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南头街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南山街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "沙河街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "蛇口街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "招商街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "粤海街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "桃源街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "西丽街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
          ]),
        }, {
          name: 'scatter3D',
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          pointSize: 10,
          blurSize: 10,
          data: convertData([
            {
              name: "罗湖区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南山区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "宝安区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "光明区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "龙华区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "龙岗区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "盐田区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "大鹏区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "坪山区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "大鹏区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "福田区",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南头街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "南山街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "沙河街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "蛇口街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "招商街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "粤海街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "桃源街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
            {
              name: "西丽街道",
              value: (Math.random() * 300 + 100).toFixed(2)
            },
          ]),
        }]
      }
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    },
    getBigData() {
      this.map = new BMap.Map("allmap", {
        enableMapClick: false,
        minZoom: 11,
        maxZoom: 19,

      });    // 创建Map实例

      this.map.centerAndZoom(new BMap.Point(114.188283, 22.667865), 11);  // 初始化地图,设置中心点坐标和地图级别
//        this.map.addControl(new BMap.OverviewMapControl());
//        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
      this.map.enableScrollWheelZoom(); // 允许滚轮缩放
      this.map.setMapStyle({
        style: 'midnight'
      });
      szlnglat.features.forEach(item => {
        this.showAreaCenter(item.geometry.coordinates[0])
      })
      this.showloading = true
      this.dataIndex = 0
//        方式1
      /*
       setTimeout(() => {
       this.fileStrList.forEach((item, index) => {
       this.axios.get(item, {}).then(response => {
       this.mapData = response.data ? response.data : []
       this.mapvSet(index)
       })
       })
       }, 2000)*/
//        方式2
      setTimeout(() => {
        this.getBigMapv(this.dataIndex)
      }, 500)
    },
    getBigMapv(dataIndex) {
      this.axios.get(this.fileStrList[dataIndex], {}).then(response => {
        this.mapData = response.data
        this.mapvSet(dataIndex)
      })
    },

    mapvSet(index) {
      if (this.mapType != "two" || this.mapData.length == 0) {
        return
      }

      var dataSet = new mapv.DataSet(this.mapData);
      var options = {
        splitList: this.$store.state.splitMapColors,
        size: 0.5,
        draw: 'category'
      }

      new mapv.baiduMapLayer(this.map, dataSet, options);
//         方式1
      this.dataIndex++
//        方式2
      if (this.dataIndex < this.fileStrList.length) {
        this.getBigMapv(this.dataIndex)
      }
//-----------------------------------------------------------------------------

      if (this.dataIndex == this.fileStrList.length - 1) {
        setTimeout(() => {
          this.showloading = false
        }, 1000)
      }

    },
    getBigHotData() {
      this.map = new BMap.Map("allmap", {
        enableMapClick: false,
        minZoom: 11,
        maxZoom: 19,

      });    // 创建Map实例

      this.map.centerAndZoom(new BMap.Point(114.188283, 22.667865), 11);  // 初始化地图,设置中心点坐标和地图级别
//        this.map.addControl(new BMap.OverviewMapControl());
//        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
      this.map.enableScrollWheelZoom(); // 允许滚轮缩放
      this.map.setMapStyle({
        style: 'midnight'
      });
      let data = []
      /* bigdata.areaHotData.forEach(item => {
       data.push({...item, time: Math.random() * 10})
       })*/
      szlnglat.features.forEach(item => {
        this.showAreaCenter(item.geometry.coordinates[0])
      })
      this.doMapLayer(this.caseData)
    },
    doMapLayer(data) {
      if (data.length == 0) {
        return
      }
      let dataSet = new mapv.DataSet(data);
      let options = {
        fillStyle: 'rgba(241, 9, 9, 0.8)',
        size: 4.0,
        bigData: 'Point',
        draw: 'simple',
      }
      let options1 = {
        fillStyle: 'rgba(255, 250, 250, 0.9)',
        size: 4.3,
        draw: 'simple',
        bigData: 'Point',
        animation: {
          stepsRange: {
            start: 0,
            end: 10
          },
          trails: 1,
          duration: 6,
        }
      }
      new mapv.baiduMapLayer(this.map, dataSet, options);
//        new mapv.baiduMapLayer(this.map, dataSet, options1);
    },
    //百度提取区域经纬度
    showAreaCenter(areaPoints) {

      let _this = this, arr = []
      if (areaPoints && areaPoints.length > 2) {
//          _this.map.clearOverlays();        //清除地图覆盖物
        areaPoints.forEach((item) => {
          arr.push(new BMap.Point(item[0], item[1]))
        })
        //              Polyline  Polygon
        _this.ply = new BMap.Polyline(arr, {
          strokeColor: "#3975FE",    //边线颜色。
          fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 1,       //边线的宽度，以像素为单位。
          strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
          fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
        });  //创建多边形

        _this.map.addOverlay(_this.ply);  //添加覆盖物
        _this.ply.disableMassClear()
//          _this.map.setViewport(_this.ply.getPath());    //调整视野
//          _this.map.setZoom(13)

      }

    },
    echarts_1() {
      //data 为模拟数据
      var data = this.echarts_1Data[1].reverse()
//        let data = this.echarts_1Data
      var myChart = this.echarts.init(document.getElementById('echart1'));
      window.addEventListener('resize', function () {
        myChart.resize();
      });
      var startColor = [
        {color: '#FE8762', color1: '#ab3a2d', enterpriseName: "摩拜"},
        {color: '#FFE775', color1: '#B99503', enterpriseName: "ofo"},
        {color: '#00BAFF', color1: '#056FBC', enterpriseName: "哈啰"},
        {color: "#0bb5b4", color1: "#076a69", enterpriseName: "青桔"}];

      function deepCopy(obj) {
        if (typeof obj !== 'object') {
          return obj;
        }
        var newobj = {};
        for (var attr in obj) {
          newobj[attr] = obj[attr];
        }
        return newobj;
      }

      var xData = [],
          yData = [];
      data.map((a, b) => {
        xData.push(a.name);
        yData.push(a.value);
      });

      var RealData = [];
      var borderData = [];
      data.map((item, index) => {
        var newobj = deepCopy(item);
        var newobj1 = deepCopy(item);
        RealData.push(newobj);
        borderData.push(newobj1);
      });
      RealData.map((item, index) => {
        startColor.forEach(item1 => {
          if (item1.enterpriseName == item.name) {
            item.itemStyle = {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: item1.color // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: item1.color // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
              }
            }
          }

        })

      });
      borderData.map((item, index) => {
        startColor.forEach(item1 => {
          if (item1.enterpriseName == item.name) {
            item.itemStyle = {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: item1.color1 // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: item1.color1 // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
              }
            }
          }

        })
      });
      let option = {
        tooltip: {
          trigger: 'item',
          //            position: ['30%', '50%'],
          confine: true,
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          show: false,
          orient: 'vertical',
          x: 'left',
          data: this.echarts_1Data[0]
        },
        series: [
          // 主要展示层的
          {
            radius: ['32%', '46%'],
            center: ['50%', '50%'],
            type: 'pie',
            /*labelLine: {
             normal: {
             length: 100,
             length2: 70,
             lineStyle: {
             color: '#333'
             }
             }

             },*/

            label: {
              normal: {
                show: true,
                lineHeight: 15,
                formatter: '{b|{b}} {d}%\n{c}\n',
                textStyle: {
                  color: '#bef2ff'
                },
                rich: {
                  b: {
                    color: '#FFCF00',
                    lineHeight: 18,
                    align: 'center',
                    fontSize: 14
                  },
                }
              },
              emphasis: {
                show: true
              },
            },
            labelLine: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            name: "单车数量",
            data: RealData
          },
          // 边框的设置
          {
            radius: ['27%', '32%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: borderData
          }
        ]
      };
      myChart.setOption(option);

    },
    echarts_2(seriesData) {

      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart2'));

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#dddc6b'
            }
          }
        },
        legend: {
          top: '0%',
          data: ['摩拜', 'ofo', '青桔', '哈啰'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        grid: {
          left: '10',
          top: '30',
          right: '10',
          bottom: '10',
          containLabel: true
        },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']

        }, {

          axisPointer: {show: false},
          axisLine: {show: false},
          position: 'bottom',
          offset: 20,

        }],

        yAxis: [{
          type: 'value',
          axisTick: {show: false},
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: seriesData
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_3(indicatorData, dataArr) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart3'));

      let option = {
        color: this.$store.state.colors,
        title: {
          text: '',
          show: false,
          textStyle: {
            fontSize: 15,
            fontWeight: 'bolder',
            color: '#3975FE'          // 主标题文字颜色
          },
        },
        tooltip: {},
        radar: {
//               shape: 'circle',
          center: ['50%', '55%'],
          name: {
            textStyle: {
              color: '#b0c2f9',
            }
          },
          splitArea: {
            areaStyle: {
              color: [
                'rgba(114, 172, 209, 0.1)',
                'rgba(114, 172, 209, 0.5)',
                'rgba(114, 172, 209, 0.1)',
                'rgba(114, 172, 209, 0.5)',
                'rgba(114, 172, 209, 0.1)'
              ],
              /*shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 10*/
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          indicator: indicatorData
        },
        series: [{
          name: '指标得分',
          type: 'radar',
          areaStyle: {
            normal: {
              opacity: 0.2
            }
          },
          data: dataArr
        }]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

    },
    echarts_10(ecData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart10'));

      let option = {
        //  backgroundColor: '#00265f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ecData[0],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid"
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.8)",
              fontSize: '12',
            },
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: (params) => {
              if (params > 0) {
                return params + "万"
              } else {
                return params
              }
            },
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: '12',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          }
        }],
        series: [{
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: '#01CBE3',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 203, 227, 0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 203, 227, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
          },
          itemStyle: {
            normal: {
              color: '#01CBE3',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: ecData[1],

        }
        ]
      };

      function refreshData(data) {
        if (!myChart) {
          return;
        }
        //更新数据
        var option = myChart.getOption();
        option.series[0].data = data;
        myChart.setOption(option);
      }

      /*setInterval(()=>{
       let arr=[]
       for(var i=0;i<10;i++){
       arr.push(this.randomNum(10000,100000))
       }
       refreshData(arr)
       },1000)*/
      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_4(serdata) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart4'));
      let data = serdata
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            const param = params[0];
            const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
            const suffix = '<span style="margin-left:5px;font-size:12px;">人</span>';
            return param.name + "<br />" +
                //                marker + "排名：" + (param.dataIndex+1) + "<br />" +
                marker + "数量：" + param.value + suffix;
          }
        },
        grid: {
          top: 10,
          bottom: 10,
          left: 40,
          right: 50
        },
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisLine: {show: false},
          axisTick: {show: false},
          axisLabel: {
            fontSize: 12,
            color: "#b0c2f9"
          }
        },
        series: [{
          name: "单车企业",
          type: "bar",
          barCategoryGap: "60%",
          label: {
            show: true,
            position: "right",
            fontSize: 12,
            color: "#188df0",
            emphasis: {
              color: "#e6b600"
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#185bff'}
                  ]
              )
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.7, color: '#e6b600'},
                    {offset: 1, color: '#ceac09'}
                  ]
              )
            }
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      const xData = [];
      const yData = [];
      for (let i in data) {
        xData.push(data[i].value);
        yData.push(data[i].label);
      }
      myChart.setOption({
        yAxis: {
          data: yData
        },
        series: [{
          name: "市价总值排行",
          data: xData
        }]
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_5() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = new echarts.init(document.getElementById('echart5'));
      let option = {
        color: ["#F06E43", "#FFE775", "#27A1FF", "#1273F8", "#9921FF"],
        title: {
          show: false,
          text: '漏斗图',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'item',
//            formatter: "{a} <br/>{b} : {c}%"
          formatter: (params) => {
            let index = params.dataIndex == 4 ? 0 : params.dataIndex == 3 ? 1 : params.dataIndex == 2 ? 2 : params.dataIndex == 1 ? 3 : params.dataIndex == 0 ? 4 : 0
            return this.echarts_5Data[index].name + " : " + this.echarts_5Data[index].value1
          },
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          show: false,
          data: ['东门街道', '粤海街道', '水贝街道', '西乡街道', '盐田街道']
        },
        calculable: true,
        series: [
          {
            name: '街道停放排名',
            type: 'funnel',
            left: 5,
            top: 10,
            //x2: 80,
            bottom: 10,
            width: '49%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 10000,
            minSize: '30%',
            maxSize: '100%',
            sort: 'descending',
            gap: 1,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 20,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#5A1C09',
                borderWidth: 1,
                // color: 各异,
                label: {
//                    formatter: "{b} : {c}",
                  formatter: (params) => {
                    let index = params.dataIndex == 4 ? 0 : params.dataIndex == 3 ? 1 : params.dataIndex == 2 ? 2 : params.dataIndex == 1 ? 3 : params.dataIndex == 0 ? 4 : 0
                    return this.echarts_5Data[index].name + " : " + this.echarts_5Data[index].value1
                  },
                  position: 'right'
                }
              }
            },
            emphasis: {
              label: {
                fontSize: 14
              }
            },
            data: this.echarts_5Data
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_6(seriesData) {
      /*let arr = [[], [], []]
       for (var i = 0; i < 24; i++) {
       arr[0].push(this.randomNum(80000, 100000))
       arr[1].push(this.randomNum(50000, 80000))
       arr[2].push(this.randomNum(10000, 30000))
       }*/
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart6'));

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#dddc6b'
            }
          }
        },
        legend: {
          top: '0%',
          data: ['摩拜', 'ofo', '青桔', '哈啰'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        grid: {
          left: '10',
          top: '30',
          right: '10',
          bottom: '10',
          containLabel: true
        },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }

          },

          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']

        }, {

          axisPointer: {show: false},
          axisLine: {show: false},
          position: 'bottom',
          offset: 20,

        }],

        yAxis: [{
          type: 'value',
          axisTick: {show: false},
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            formatter: (params) => {
              if (params > 0) {
                return params + "万"
              } else {
                return params
              }
            },
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          }
        }],
        series: seriesData

      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_7() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.echarts.init(document.getElementById('echart7'));
      let option = {
        color: ['#F06E43', '#00EEFE'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          data: ['案件数', '已处理'],
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12',
          }
        },
        grid: {
          left: '10',
          top: '35',
          right: '10',
          bottom: '5',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.echarts_7Data[0],
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.8)",
              fontSize: '12',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#1B5BBA',
            }
          }
        },
        yAxis: {

          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: '#1B5BBA',
            }
          },
          axisLabel: {

            color: '#5EA2ED',
            interval: 0
          },
        },
        series: [
          {
            type: 'pictorialBar',
            name: '案件数',
            symbolSize: ['80%', '90%'],
            // symbolPosition: 'center',
            z: 10,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}",

                color: "#bef2ff",
                fontSize: 10
              }
            },
            data: this.echarts_7Data[1]
          },
          {
            type: 'pictorialBar',
            name: '已处理',
            symbolSize: ['80%', '90%'],
            // symbolPosition: 'center',
            z: 10,
            label: {
              normal: {
                show: true,
                position: "insideTop",
                formatter: function (params) {
                  const param = params.value;
                  if (param > 0) {
                    return param
                  } else {
                    return ""
                  }
                },
                color: "#bef2ff",
                fontSize: 10
              }
            },
            data: this.echarts_7Data[2]
          },
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    echarts_8(echartsData) {
      var data = echartsData

      var myChart = this.echarts.init(document.getElementById('echart8'));
      window.addEventListener('resize', function () {
        myChart.resize();
      });
      var yMax = 0;
      for (var j = 0; j < data.length; j++) {
        if (yMax < data[j].value) {
          yMax = data[j].value;
        }
      }
      myChart.hideLoading();
      let option = {
        animation: true,
        tooltip: {
          show: true
        },
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '50%',
          containLabel: true
        },
        visualMap: {
          min: 0,
          max: yMax,
          text: ['高', '低'],
//            orient: 'horizontal',
          itemWidth: 10,
          itemHeight: 100,
          right: 0,
          bottom: 0,
          inRange: {
            color: ['#0e94eb', '#FE8762']
          },
          textStyle: {
            color: '#bef2ff'
          }
        },
        series: [
          {
            name: '数据名称',
            type: 'map',
            mapType: 'shenzhen',
//              layoutCenter: ['40%', '50%'],
            selectedMode: 'multiple',
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c} (件)'
            },
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: '#bef2ff',
                label: {
                  show: false
                }
              },
              emphasis: { // 也是选中样式
                borderWidth: 1,
                borderColor: '#fff',
                backgroundColor: 'red',
                label: {
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                }
              }
            },
            data: data,
          }
        ]
      };

      myChart.setOption(option);
    },
    changeMapType() {
      this.showloading = false
      if (this.mapType == "two") {
        //    设置 Access-Control-Allow-Origin 标头
        this.getBigData()
      } else if (this.mapType == "three") {
        this.getBigHotData()
      }
    },
    randomNum(minNum, maxNum) {

      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  watch: {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl"

.bigdataContainer
  width 100%
  height 100%
  overflow hidden
  background-color #050d3d

  .icon-guanbi
    position absolute
    top 5px
    right 5px
    color #0e94eb
    font-size 12px
    cursor pointer
    z-index 1000

    &:hover
      color #bef2ff

  .bigDataWrap
    position relative
    width 100%
    height 100%
    background: url('./img/bg1.png')

    .bigDataheader
      position: absolute;
      width 100%
      left 0;
      top 0;
      z-index 10
      overflow: hidden;
      text-align center

      .header-title
        display inline-block
        text-align: center;
        padding 0 70px
        font-size: 24px;
        font-weight: 400;
        color: #bef2ff;
        height 61px
        line-height 46px
        background: url("./img/headerBg.png") 0 0 / 100% 100% no-repeat;

        .logoSty
          display inline-block
          width 64px
          height 46px
          vertical-align middle

        .titleSty
          vertical-align middle

    .bigDataInner
      position absolute
      left 0px
      right 0px
      top 15px
      bottom 15px

      .echartslrWrap
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

      .echartsCwrap
        height: 25%;
        padding: 0 10px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        right: 0;
        box-sizing: border-box;

      .boxall
        padding: 5px;
        box-sizing border-box
        background: url("./img/echartsbg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        z-index: 10;

        &:hover
          background: url("./img/echartsCheck.png") no-repeat;
          background-size: 100% 100%;

          .alltitle:before
            position absolute
            content: "";
            left 20px;
            top 14px;
            height 10px
            width 13px
            background url("./img/titleCheck.png") center no-repeat

        .d-roll-wrapper
          margin 0 !important

          .d-roll-list
            float left !important

            .d-roll-item > .d-roll-bar > div
              font-family: digital;
              letter-spacing 3px
              font-size 19px

        .alltitle
          font-size: 15px;
          color: #bef2ff;
          text-align: left;
          line-height: 20px;
          margin-top 3px
          padding-left 36px
          box-sizing border-box

          &:before
            position absolute
            content: "";
            left 20px;
            top 14px;
            height 10px
            width 13px
            background url("./img/titleBg.png") center no-repeat

      .allnav
        height: calc(100% - 23px);

      #echart1
        background url("./img/pieStyle.png") center no-repeat;

        &:before
          position absolute
          content: "";
          left 0
          top 0
          right 0
          bottom 0
          background url("./img/piecenter.png") center no-repeat

      .mapMainWrap
        position absolute
        left 5px
        right 5px
        top 50px
        bottom 0px
        z-index 10

      .mapContainer
        width 100%
        height 100%

        .loadingWrap
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.6);

          .loadingInner
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            text-align: center;

            .loadingText
              color: #409eff;
              font-size: 12px;

      &:hover .icon-quanping2
        position absolute
        right 10px
        top 10px
        display inline-block
        color #bef2ff
        cursor pointer
        z-index 100

      #allmap
        height 100%
        width 100%
        background-color blue

      .imgWrap
        width 100%
        height 100%
        text-align center /*transition: all 0.5s;
          -moz-transition: all 0.5s;
          -webkit-transition: all 0.5s;
          &:hover
            -webkit-transform: scale(2,2);
            -moz-transform: scale(2,2);
            transform: scale(1.5,1.5);*/

        .imgMapInner
          padding-top: 55px;
          position: relative;
          height: 100%;

          .gradeClass
            position: absolute;
            right: 20px;
            top: 10px;
            color: #3975FE;
            line-height: 22px;
            font-size: 12px;
            font-weight: bold;

          .imgHomeWrap
            height: 79%;
            position: relative;
            display: inline-block;
            max-width 100%
            margin: 0 auto;
            /*.textSha
              text-shadow: 1px 1px 1px #7fb0e6, -1px -1px 1px #105cb3;*/
            /*text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;*/

            .imgMapSty
              height: 100%;
              max-width 100%
              display: inline-block;

            .areaListSty
              display: inline-block;
              font-size: 11px;
              color: #bef2ff;
              line-height: 15px;
              position: absolute;
              cursor pointer;

      .bikeButtonWrap
        position absolute
        left 50%
        top 50px
        z-index 20
        text-align center
        display inline-block
        margin-left -275px

        .textBikeWrap
          line-height 20px
          padding-top 7px
          color #bef2ff

          .textBikeFirst
            font-size 24px

          .textBikeSecond
            font-size 13px

        .el-radio-group
          .el-radio-button
            width 165px
            height 49px
            margin 0 10px
            background: url("./img/checkbg.png") no-repeat;
            background-size: 100% 100%;

            &.is-active, &:hover
              background: url("./img/checkbga.png") no-repeat;
              background-size: 100% 100%;

              .textBikeWrap
                color #FFCF00

            .el-radio-button__inner
              width 165px
              height 49px
              padding 0 !important
              border none
              background-color rgba(0, 0, 0, 0) !important

      .buttonbottomWrap
        position absolute
        left 0
        bottom 15px
        z-index 20
        text-align center
        width: 100%;

        .textBikeWrap
          line-height 25px
          color #bef2ff

          .textBikeFirst
            font-size 12px

        .el-radio-group
          .el-radio-button
            width 84px
            height 25px
            margin 0 10px
            background: url("./img/checkBgs.png") no-repeat;
            background-size: 100% 100%;

            &.is-active, &:hover
              background: url("./img/checkbgy.png") no-repeat;
              background-size: 100% 100%;

              .textBikeWrap
                color #FFCF00

            .el-radio-button__inner
              width 84px
              height 25px
              padding 0 !important
              border none
              background-color rgba(0, 0, 0, 0) !important

      .mapBg {
        position: relative;
        height: 100%;
        width: 70%;
        display: inline-block;
        z-index: 9;
      }

      .mapBg1, .mapBg2, .mapBg3 {
        position: absolute;
        opacity: .5
      }

      .mapBg1 {
        height: 100%;
        z-index: 2;
        top: 0%;
        left: 4%;
        animation: myfirst2 15s infinite linear;
      }

      .mapBg2 {
        height: 90%;
        top: 5%;
        left: 8%;
        z-index: 3;
        opacity: 0.2;
        animation: myfirst 10s infinite linear;
      }

      .mapBg3 {
        height: 80%;
        top: 10%;
        left: 12%;
        z-index: 5;
      }

      @keyframes myfirst2 {
        from {
        transform: rotate(0deg);
        }
        to {
        transform: rotate(359deg);
      }
  }

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

/*.el-loading-spinner i {
  font-size: 60px;
}
.el-loading-spinner .el-loading-text{
  font-size: 14px;
}*/
</style>
